<template>
	<view class="page-container">
		<view  v-show="!state">
			<view class="head padd30">
				
				<view class="login" @click="login()">立即登录</view>
			</view>
		</view>
		<view v-show="state">
			<view class="head padd30">
				<view class="userInfo padd0_30 between">
					<image src="@/static/img/wxjpg1.jpg" class="headImg"
						mode="aspectFill"></image>
					<view class="info">
						<view class="name">{{ user.user_name }}</view>
						<view class="txt ellipsis">欢迎您使用宝安区房屋租赁协会小程序</view>
					</view>
				</view>
			</view>
			<view class="tabs padd0_30">
				<view class="lay padd30_0">
					<view class="item" @click="toMyCollect()">
						<image class="icon" src="../../static/img/ccz.png"></image>
						<view class="txt">我的收藏</view>
					</view>
					<view class="hr"></view>
					<view class="item" @click="toEnroll()">
						<image class="icon" src="../../static/img/reeo.png"></image>
						<view class="txt">我的活动</view>
					</view>
				</view>
			</view>
			<view class="list padd30">
				<view class="item between" @click="toUserInfo">
					<image src="../../static/img/wqzz.png" class="icon"></image>
					<view class="txt">基本资料</view>
					<image class="icon-more" src="../../static/img/gengduo.png" ></image>
				</view>
				<view class="item between" @click="toLeasing">
					<image src="../../static/img/eqq.png" class="icon"></image>
					<view class="txt">关于协会</view>
					<image class="icon-more" src="../../static/img/gengduo.png" ></image>
				</view>
				<view class="item between" @click="toSet">
					<image src="../../static/img/pi.png" class="icon"></image>
					<view class="txt">退出</view>
					<image class="icon-more" src="../../static/img/gengduo.png" ></image>
				</view>
				
			</view>
		</view>
		
		<view class="rule padd30_0">
			<view class="link" @click="toServe">《用户服务协议》</view>
			<view class="hr"></view>
			<view class="link" @click="toPrivacy">《用户隐私协议》</view>
		</view>
		
		<view class="rule padd30_0 beian">
			<navigator url="/pages/gov/gov">粤ICP备2023075427号-3</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
	} from 'vue'
	import {
		onLoad,
		onShow,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app'
	
	const {
		proxy
	} = getCurrentInstance();
	
	const imagesUrl = proxy.$imagesUrl; //图片路径
	
	const user = ref({
		create_time: null,
		create_user_id: null,
		create_user_name: null,
		head_img: null,
		id: 5,
		limit: 0,
		offset: 10,
		spare: null,
		spare1: null,
		spare2: null,
		user_name: null,
		user_phone: "",
		user_type: 1,
		wx_openid: "",
	});
	
	const state = ref(false);
	
	//用户服务协议
	function toServe(){
		uni.navigateTo({
			url:"/pages/mine/serve"
		})
	}
	
	//用户隐私协议
	function toPrivacy(){
		uni.navigateTo({
			url:"/pages/mine/privacy"
		})
	}
	
	//跳转 我的收藏
	function toMyCollect(){
		uni.navigateTo({
			url:"/pages/mine/myCollect"
		})
	}
	//跳转 我的活动
	function toEnroll(){
		uni.navigateTo({
			url:"/pages/enroll/infoList"
		})
	}
	
	//跳转 基本资料
	function toUserInfo(){
		uni.navigateTo({
			url:"/pages/mine/userInfo"
		})
	}
	//跳转 设置
	function toSet(){
		state.value = false
		uni.setStorageSync('USERDATA', null);
	}
	
	function toLeasing(){
		uni.navigateTo({
			url:"/pages/mine/leasing"
		})
	}
	
	function login() {
		//用户登录获取限时5分钟的code
		uni.login({
			success: (res) => {
				proxy.$request({
					url: `${proxy.$api.getWxUserInfo}` + '?code=' + res.code,
					data: "",
					method: "POST"
				}).then(res => {
					uni.setStorageSync('USERDATA', res.data);
					user.value = res.data
					state.value = true
					if (res.data.user_type == 0) {
						uni.showModal({
							title: '填写资料获取优惠券',
							// content: '填写资料获取优惠券',
							showCancel: false, // 不显示取消按钮
							success: (res) => {
								uni.navigateTo({
									url: "/pages/enroll/index"
								})
							}
						});
	
					}
				});
			}
		})
	}
	
	onLoad((e)=>{
		login()
	})
</script>

<style lang="less" scoped>
	
	.login{
		margin: auto;
		background-color: white;
		border-radius: 16rpx;
		padding: 20rpx 30rpx;
		width: 300rpx;
		text-align: center;
		margin-top: 80rpx;
	}
	.head{
		background-color: #c4e6ff;
		height: 408rpx;
		width: 100%;
		padding-top: 90rpx;
		.userInfo{
			width: 100%;
			.headImg{
				width: 128rpx;
				height: 128rpx;
				border-radius: 100%;
			}
			.info{
				padding-left: 30rpx;
				flex: 1;
				overflow: hidden;
				.name{
					font-size: 32rpx;
					line-height: 48rpx;
					margin-bottom: 15rpx;
				}
				.txt{
					font-size: 26rpx;
					color: #747474;
				}
			}
		}
	}
	.tabs{
		position: relative;
		margin-top: -94rpx;
		.lay{
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #ffffff;
			border-radius: 16rpx;
			box-shadow: 0px 0px 8px 0px rgba(55, 123, 245, 0.08);
			.hr{
				width: 2rpx;
				height:128rpx;
				margin: auto 60rpx;
				background-color: #f1f1f1;
			}
			.item{
				width: 200rpx;
				text-align: center;
				.icon{
					width: 68rpx;
					height: 68rpx;
					display: block;
					margin: auto;
				}
				.txt{
					margin-top: 15rpx;
					font-size: 26rpx;
					color: #333333;
				}
			}
		}
	}
	.list{
		margin-top: 48rpx;
		background-color: #ffffff;
		.item{
			border-bottom: 2rpx solid #f8f8f8;
			height: 98rpx;
			.icon{
				width: 48rpx;
				height: 48rpx;
				display: block;
			}
			.txt{
				font-size: 26rpx;
				color: #333333;
				flex:1;
				padding-left: 30rpx;
			}
			.icon-more{
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	.rule{
		display: flex;
		align-items: center;
		justify-content: center;
		.link{
			font-size: 24rpx;
			color: #4886f9;
			text-decoration: underline;
		}
		.hr{
			height: 48rpx;
			width: 2rpx;
			background-color: #f8f8f8;
			margin: 0 30rpx;
		}
	}
	
	.beian{
		font-size: 12px;
		color: #666;
	}
</style>